<template>
  <view class="content-home">
    <!-- <uni-swiper-dot :info="list" :dotsStyles="dotsStyles" :current="current" mode="dot"> -->
    <swiper
      circular
      style="height: 300rpx; width: 100%"
      :circular="true"
      autoplay="false"
      :interval="4000"
      :duration="500"
      @change="change"
    >
      <swiper-item
        :current="current"
        @change="change"
        v-for="(item, index) in list"
        :key="index"
      >
        <image
          style="height: 100%; width: 100%"
          src="../static/image/home_top.png"
        ></image>
      </swiper-item>
    </swiper>
    <!-- </uni-swiper-dot> -->
    <!-- <view class="yujing">
      <view class="yujing_left">
        <view>预警事件</view>
        <view>
          <text>8</text>
          <text>次</text>
        </view>
      </view>
      <view class="yujing_right">
        <view>
          <text>漏损</text>
          <text>28.6</text>
          <text>m³</text>
        </view>
        <image src="../static/image/jindujiantou.png"></image>
        <view>
          <progress percent="20" stroke-width="14" />
          <text>5</text>
          <text>%</text>
        </view>
      </view>
    </view> -->

    <view class="yali">
      <view class="yali_left">
        <view class="yali_left_title">压力传感器(个)</view>
        <view class="yali_left_wrap">
          <view class="yali_left_wrap_item">
            <view> 工作中 </view>
            <view> 231 </view>
          </view>
          <view class="yali_left_wrap_item">
            <view> 总量 </view>
            <view> 231 </view>
          </view>
        </view>
      </view>
      <view class="yali_right">
        <view v-for="(item, index) in yl" :key="index"
          >{{ item.name
          }}<text>{{ item.value ? Number(item.value).toFixed(3) : 0 }}</text
          >Mpa</view
        >
      </view>
    </view>

    <view class="ljll">
      <view
        class="ljll_item"
        style="border-right: 2rpx solid #ededed; padding-right: 42rpx"
      >
        <view>今日累计供水(m³)</view>
        <view>{{ BRGS }}</view>
      </view>
      <view class="ljll_item" style="padding-left: 42rpx">
        <view>本月累计供水(m³)</view>
        <view>{{ BYGS }}</view>
      </view>
    </view>
    <view class="ssll">
      <view>瞬时流量（m³/秒）</view>
      <scroll-view
        scroll-x
        show-scrollbar="false"
        class="scrollx"
        v-if="ColumnB"
        style="display: flex; flex-direction: row; white-space: nowrap"
      >
        <view style="display: inline-block;margin-top: 20rpx;">
          <canvas
            canvas-id="canvasColumn"
            id="canvasColumn"
            class="charts"
            :width="
              ((ColumnB.categories.length < 6 ? 4 : ColumnB.categories.length) /
                6) *
              cWidth *
              pixelRatio
            "
            :height="cHeight * pixelRatio"
            disable-scroll="true"
            :style="{
              width:
                ((ColumnB.categories.length < 6
                  ? 6
                  : ColumnB.categories.length) /
                  6) *
                  cWidth +
                'px',
              minWidth: cWidth + 'px',
              height: cHeight + 'px',
            }"
          ></canvas>
          <view
            :style="{
              width:
                ((ColumnB.categories.length < 6
                  ? 6
                  : ColumnB.categories.length) /
                  6) *
                  cWidth +
                'px',
              height: cHeight + 'px',
              position: 'absolute',
              top: 0,
            }"
          >
          </view>
        </view>
      </scroll-view>
      <!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
               disable-scroll=true :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
            -->
    </view>

    <view class="szqs">
      <view class="szqs_left" style="border-right: 2rpx solid #ededed">
        <view>水质检测样本合格情况</view>
        <view style="margin-top: 42rpx">
          <canvas
            canvas-id="canvasRing"
            id="canvasRing"
            class="charts"
            :style="{
              width: cWidth * pixelRatio * 0.6 + 'px',
              height: cHeight * pixelRatio * 0.6 + 'px',
              right: cWidth * pixelRatio * 0.05 + 'px',
            }"
          ></canvas>
        </view>
        <view class="szqs_left_type">
          <view>
            <view class="szqs_left_type_num">2</view>
            <view class="szqs_left_type_value" style="color: #2375ad">
              <view style="background: #2375ad" />
              合格
            </view>
          </view>
          <view>
            <view class="szqs_left_type_num">2</view>
            <view class="szqs_left_type_value" style="color: #e87b39">
              <view style="background: #e87b39" />
              预警
            </view>
          </view>
          <view>
            <view class="szqs_left_type_num">2</view>
            <view class="szqs_left_type_value" style="color: #a5a5a5">
              <view style="background: #a5a5a5" />
              不合格
            </view>
          </view>
        </view>
      </view>
      <view class="szqs_right">
        <view>分水口取水情况</view>
        <view style="margin-bottom: 100rpx"><text>12/15</text>个</view>
        <view>设备正常工作情况</view>
        <view style="margin-bottom: 100rpx">共<text>295</text>台</view>
        <view class="szqs_right_type">
          <view>
            <view class="szqs_right_type_num">2</view>
            <view class="szqs_right_type_value">
              <image src="../static/image/zhengchang.png"></image>
              正常
            </view>
          </view>
          <view>
            <view class="szqs_right_type_num">2</view>
            <view class="szqs_right_type_value">
              <image src="../static/image/guzhang.png"></image>
              故障
            </view>
          </view>
          <view>
            <view class="szqs_right_type_num">2</view>
            <view class="szqs_right_type_value">
              <image src="../static/image/tingji.png"></image>
              停机
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx; background: #ededed" />
    <tui-modal
      :show="modal"
      @click="gengxin"
      content="检测到新版本，是否更新？"
      color="#333"
      :size="32"
      :button="button"
    ></tui-modal>
    <tui-modal
      :show="modal2"
      @click="cancel(true)"
      :content="`正在下载文件:${jd}%`"
      color="#333"
      :size="32"
      :button="button2"
    ></tui-modal>
  </view>
</template>

<script>
import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
import uCharts from "@/components/u-charts/u-charts.js";
import API from "@/common/api.js";
var _self;
var canvaColumn = null;
var canvaRing = null;
export default {
  components: {
    uniSwiperDot,
  },
  data() {
    return {
      token: uni.getStorageSync("token"),
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      res: null,
      modal: false,
      modal2: false,
      button: [
        {
          text: "取消",
          type: "gray",
        },
        {
          text: "确定",
        },
      ],
      button2: [
        {
          text: "取消下载",
          type: "red",
        },
      ],
      jd: 0,
      downloadTask: null,
      tempFilePaths: uni.getStorageSync("tempFilePaths") || [],

      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      current: 0,
      checkTokenFlag: false,
      BRGS: 0,
      BYGS: 0,
      yl: [],
      ColumnB: null,
      list: [1],
      dotsStyles: {
        border: 0,
        selectedBorder: 0,
        selectedBackgroundColor: "white",
        bottom: 10,
      },
      cWidth: "",
      cHeight: "",
      pixelRatio: 1,
      ring: {
        series: [
          {
            name: "合格",
            data: 50,
            color: "#2375ad",
          },
          {
            name: "预警",
            data: 30,
            color: "#e87b39",
          },
          {
            name: "不合格",
            data: 30,
            color: "#a5a5a5",
          },
        ],
      },
    };
  },
  onShow() {
    setTimeout(() => {
      try {
        uni.showTabBar();
        plus.screen.lockOrientation("portrait-primary");
      } catch (e) {}
    }, 100);
    if (this.checkTokenFlag) {
      this.getData();
    }
  },
  onLoad(options) {
    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(500);
    _self = this;
    this.checkToken();
  },
  onPullDownRefresh() {
    this.getData();
  },
  methods: {
    checkToken() {
      if (!this.token) {
        uni.reLaunch({
          url: "login",
        });
      } else {
        if (uni.getStorageSync("version")) {
          uni.setStorage({
            key: "version",
            data: false,
          });
          try {
            if (parseInt(plus.runtime.version) < 9) {
              this.appSelect();
            }
          } catch (e) {}
        }
        if (!this.checkTokenFlag) {
          this.checkTokenFlag = true;
          this.getData();
        }
      }
    },
    appSelect() {
      API.selectLatestVersion({ pzhAuthorization: this.pzhAuthorization }).then(
        (res) => {
          console.log(res, 666);
          if (res.resCode == "success" && res.datas.length) {
            if (plus.runtime.version != res.datas[0].version) {
              this.res = res;
              this.modal = true;
            } else {
              plus.io.resolveLocalFileSystemURL("_doc", (entry) => {
                //通过URL参数获取目录对象或文件对象
                entry.removeRecursively(
                  (entry) => {
                    //递归删除其下的所有文件及子目录
                    // uni.showToast({
                    // 	title: '清理完成',
                    // 	icon: 'none',
                    // 	duration: 2000
                    // });
                    uni.setStorage({
                      key: "tempFilePaths",
                      data: [],
                    });
                  },
                  (e) => {
                    console.log(e.message);
                  }
                );
              });
            }
          }
        }
      );
    },
    gengxin(e) {
      if (e.index) {
        let value = "";
        this.tempFilePaths.forEach((item, ind) => {
          if (item.key == this.res.datas[0].version) {
            value = item.value;
          }
        });
        if (value) {
          console.log("----------");
          uni.getFileInfo({
            filePath: value,
            success: (r) => {
              plus.runtime.install(value);
            },
            fail: (r) => {
              this.downFile(
                this.res.datas[0].version,
                this.res.datas[0].url +
                  "&pzhAuthorization=" +
                  this.pzhAuthorization
              );
            },
          });
        } else {
          this.downFile(
            this.res.datas[0].version,
            this.res.datas[0].url + "&pzhAuthorization=" + this.pzhAuthorization
          );
        }
      }
      this.modal = false;
    },
    downFile(key, url) {
      this.downloadTask = uni.downloadFile({
        url: url,
        success: (res) => {
          this.tempFilePaths = [{ key, value: res.tempFilePath }];
          uni.setStorage({
            key: "tempFilePaths",
            data: this.tempFilePaths,
            success: (r) => {
              plus.runtime.install(res.tempFilePath);
            },
          });
        },
        fail: (e) => {
          uni.showToast({
            title: "下载失败或取消",
            icon: "none",
            duration: 2000,
          });
        },
        complete: () => {
          this.cancel(false);
        },
      });
      this.modal2 = true;
      if (this.downloadTask) {
        console.log("xxx");
        this.downloadTask.onProgressUpdate((res) => {
          console.log(res, 2222);
          this.jd = res.progress;
        });
      }
    },
    cancel(flag) {
      this.modal2 = false;
      this.jd = 0;
      if (flag && this.downloadTask) {
        this.downloadTask.abort();
      }
    },

    change(e) {
      this.current = e.detail.current;
    },
    getData() {
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
      API.getBiCurrentTotalNum().then((res) => {
        uni.hideLoading();
        this.BRGS = res.BRGS;
        this.BYGS = res.BYGS;
      });
      API.selectLineYL().then((res) => {
        uni.hideLoading();
        this.yl = res;
      });
      API.selectFSKSSQSL().then((res) => {
        this.draw(res);
        uni.hideLoading();
      });
    },
    draw(data) {
      let Column = {
        categories: [],
        series: [
          {
            name: "1",
            data: [],
            color: "#2375ad",
          },
        ],
      };

      data.forEach((item) => {
        Column.categories.push(item.name);
        Column.series[0].data.push(Number(Number(item.value||0).toFixed(1)));
      });
      this.ColumnB = Column;
      this.showColumn("canvasColumn", Column);
      let Ring = {
        series: [],
      };
      //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
      Ring.series = this.ring.series;
      //自定义文案示例，需设置format字段
      for (let i = 0; i < Ring.series.length; i++) {
        Ring.series[i].format = () => {
          return Ring.series[i].name + Ring.series[i].data;
        };
      }
      _self.textarea = JSON.stringify(this.ring);

      _self.showRing("canvasRing", Ring);
    },
    showRing(canvasId, chartData) {
      canvaRing = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "ring",
        fontSize: 11,
        padding: [0, 0, 0, 0],
        legend: true,
        background: "#FFFFFF",
        pixelRatio: _self.pixelRatio,
        series: chartData.series,
        animation: true,
        width: _self.cWidth * 0.6 * _self.pixelRatio,
        height: _self.cHeight * 0.6 * _self.pixelRatio,
        disablePieStroke: true,
        dataLabel: false,
        legend: {
          show: false,
          // position: 'bottom',
          // float: 'center',
          // itemGap: 10,
          // padding: 5,
          // lineHeight: 26,
          // margin: 5,
          // //backgroundColor:'rgba(41,198,90,0.2)',
          // //borderColor :'rgba(41,198,90,0.5)',
          // borderWidth: 1
        },
        extra: {
          pie: {
            offsetAngle: 0,
            ringWidth: 40 * _self.pixelRatio * 0.9,
            labelWidth: 0,
          },
        },
      });
    },
    showColumn(canvasId, chartData) {
      canvaColumn = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "column",
        // padding: [15, 5, 0, 15],
        legend: {
          show: false,
          padding: 5,
          lineHeight: 11,
          margin: 0,
        },
        fontSize: 11,
        background: "#FFFFFF",
        pixelRatio: _self.pixelRatio,
        animation: true,
        categories: chartData.categories,
        series: chartData.series,
        enableScroll: false,
        xAxis: {
          disableGrid: false,
          type: "grid",
          gridType: "dash",
          itemCount: 6,
          scrollShow: true,
          scrollAlign: "left",
          scrollBackgroundColor: "#F7F7FF",
          scrollColor: "#DEE7F7",
        },
        yAxis: {
          disabled: true,
          // data: [{
          //     position: 'right',
          //     axisLine: false,
          //     format: (val) => {
          //         return val.toFixed(0)
          //     },
          // }]
        },
        dataLabel: true,
        width:
          ((_self.cWidth *
            (_self.ColumnB.categories.length < 6
              ? 6
              : _self.ColumnB.categories.length)) /
            6) *
          _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          column: {
            type: "group",
            width:
              (_self.cWidth * _self.pixelRatio * 0.45) /
              chartData.categories.length,
          },
        },
      });
    },
    touchColumn(e) {
      canvaColumn.scrollStart(e);
    },
    moveColumn(e) {
      canvaColumn.scroll(e);
    },
    touchEndColumn(e) {
      canvaColumn.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      // canvaColumn.showToolTip(e, {
      //     format: function (item, category) {
      //         return category + ' ' + item.name + ':' + item.data
      //     }
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.content-home {
  height: 100vh;
  background: white;
  font-size: 25rpx;
  color: #959595;

  .yujing {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 7rpx solid #ededed;

    .yujing_left {
      padding: 29rpx 0 29rpx 0;
      border-right: 2rpx solid #ededed;
      width: 250rpx;
      text-align: center;

      view:first-child {
        color: #959595;
        font-size: 25rpx;
      }

      view:last-child {
        margin-top: 22rpx;
        color: #000000;
        display: flex;
        justify-content: center;

        text:first-child {
          font-size: 42rpx;
          line-height: 42rpx;
          font-weight: bold;
        }

        text:last-child {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #434343;
          margin: 10rpx 0 0 12rpx;
        }
      }
    }

    .yujing_right {
      padding: 18rpx 38rpx 0 38rpx;

      view:first-child {
        text:first-child {
          color: #959595;
          font-size: 25rpx;
        }

        text:nth-child(2) {
          color: #000000;
          font-size: 42rpx;
          line-height: 42rpx;
          font-weight: bold;
          margin-left: 6rpx;
        }

        text:last-child {
          font-size: 25rpx;
          color: #434343;
          margin-left: 6rpx;
        }
      }

      image {
        width: 14rpx;
        height: 28rpx;
        z-index: 100000;
        margin-top: 18rpx;
      }

      view:last-child {
        position: relative;
        margin-top: -26rpx;
        display: flex;
        font-weight: bold;
        color: #000000;

        progress {
          width: 347rpx;
          padding: 0;
          height: 28rpx;
        }

        text:nth-child(2) {
          font-size: 42rpx;
          line-height: 30rpx;
          margin-left: 16rpx;
        }

        text:last-child {
          font-size: 28rpx;
          line-height: 28rpx;
          margin: 4rpx 0 0 4rpx;
        }
      }
    }
  }

  .yali {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 7rpx solid #ededed;

    .yali_left {
      padding: 29rpx 0 29rpx 0;
      border-right: 2rpx solid #ededed;
      width: 250rpx;
      text-align: center;

      .yali_left_title {
        color: #959595;
        font-size: 25rpx;
      }

      .yali_left_wrap {
        display: flex;
        margin-top: 40rpx;

        .yali_left_wrap_item {
          width: 50%;

          view:first-child {
            color: #959595;
            font-size: 25rpx;
            line-height: 30rpx;
          }

          view:last-child {
            font-size: 42rpx;
            font-weight: bold;
            color: #000000;
            line-height: 42rpx;
          }
        }
      }
    }

    .yali_right {
      color: #959595;
      font-size: 25rpx;
      padding-left: 38rpx;
      width: 400rpx;
      view {
        margin-top: 16rpx;
        text-align: center;
      }

      text {
        font-size: 35rpx;
        color: #000000;
        font-weight: bold;
      }
    }
  }

  .ljll {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #ededed;
    color: #959595;
    font-size: 25rpx;
    text-align: center;
    width: calc(100vw - 84rpx);
    margin-left: 42rpx;

    .ljll_item {
      width: calc(50% - 42rpx);
      padding: 22rpx 0;

      view:nth-child(2) {
        font-size: 42rpx;
        color: #000000;
        font-weight: bold;
        margin-top: 16rpx;
      }
    }
  }

  .ssll {
    padding: 54rpx 0 34rpx 0;
    text-align: center;
    border-bottom: 7rpx solid #ededed;
  }

  .szqs {
    display: flex;
    padding: 45rpx 0;
    border-bottom: 7rpx solid #ededed;
    width: 100vw;
    text-align: center;
    .szqs_left {
      width: 50%;
      .szqs_left_type {
        display: flex;
        padding: 0 20rpx;
        justify-content: space-between;
        .szqs_left_type_num {
          color: #000000;
          font-weight: bold;
          font-size: 35rpx;
        }
        .szqs_left_type_value {
          display: flex;
          view {
            width: 20rpx;
            height: 20rpx;
            border-radius: 10rpx;
            margin: 6rpx 6rpx 0 0;
          }
        }
      }
    }
    .szqs_right {
      width: 50%;
      view:nth-child(2) {
        color: #000000;
        text {
          font-size: 42rpx;
          font-weight: bold;
        }
      }
      view:nth-child(4) {
        color: #000000;
        text {
          font-size: 42rpx;
          font-weight: bold;
        }
      }
      .szqs_right_type {
        display: flex;
        padding: 0 20rpx;
        justify-content: space-between;
        .szqs_right_type_num {
          color: #000000;
          font-weight: bold;
          font-size: 35rpx;
        }
        .szqs_right_type_value {
          display: flex;
          color: #959595;
          image {
            width: 25rpx;
            height: 25rpx;
            margin: 6rpx 6rpx 0 0;
          }
        }
      }
    }
  }
}
</style>
